<template>
  <div>
    <div class="node" v-has="{action: 'personal:combo:pay:list', effect: 'move'}">
    <div :class="[$style.search_box, $style.topSelect]">
      <!-- <SearchInput
        placeholder="套餐名称"
        label="套餐名称"
        style="margin-right:20px"
        :value="searchs.name"
        :onChange="(val) => changeSearch('name',val)"
        :onBlur="getQuery"
      />
      <div :class="$style.selectBox">
        <label>套餐类型</label>
        <el-select
          style="width:160px"
          v-model="searchs.type"
          clearable
          @change="getQuery"
          placeholder="请选择类型"
        >
          <el-option label="总套餐" :value="1"></el-option>
          <el-option label="服务费套餐" :value="2"></el-option>
          <el-option label="电费套餐" :value="3"></el-option>
        </el-select>
      </div> -->
      
    </div>
    <Panel title="个人套餐活动购买选项" useBack>
      <div slot='ext' :class="$style.examine">
        <el-button type="default" icon="el-icon-refresh" @click="getQuery">刷新</el-button>
        <el-button v-has="{action: 'personal:combo:pay:add', effect: 'move'}" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
    </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button
            v-has="{action: 'personal:combo:pay:update', effect: 'move'}"
            type="text"
            @click="()=>editStore(operation.row)"
          >编辑</el-button>
          
        </template>
       
    </TableEncapsulation>
    </Panel>
    <ModalPanel 
      :visible='visible'
      title="编辑活动购买选项"
      :onCancel="onCancel"
      :class="$style.bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          :class="$style.ModifyForm"
          :temporaryData='modalData'>
        </ModifyForm>
      </div>
    </ModalPanel>
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'personal:combo:pay:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import { objectFilter } from "@/tools/array";
import SearchInput from "@/components/SearchInput";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "comboBuyIndex_",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
     ModifyForm,
    ModalPanel
  },
  data() {
    return {
      tableData: [],
      cid: '',
      searchs:{
        component: 'comboBuy',
        name: '',
        type: '',
        state:'',
      },
       pager: {
        component: 'comboBuy',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      visible:false,
      modalData:{},
      editColumn: [
        {
          name: "套餐名字",
          prop: "name",
          type: "text",
          required: true,
          width: 24
        },
        {
          name: "赠送电量",
          prop: "giveElectricity",
          type: "number",
          required: true,
          width: 24
        },
        {
          name: "购买月数",
          prop: "num",
          type: "number",
          required: true,
          width: 24
        },
        {
          name: "价格",
          prop: "price",
          type: "number",
          required: true,
          width: 24
        },
        {
          name: "套餐基础服务费单价",
          prop: "baseServicePrice",
          type: "number",
          width:24,
          required: true
        },
        {
          name: "赠送月数",
          prop: "giveNum",
          type: "number",
          required: true,
          width: 24
        },
        
      ],
    };
  },
  created(){
    if(this.$route.query.id)
     this.cid = this.$route.query.id
     this.getQuery();
  },
  computed: {
    tableConfig () {
      return {
        selection: false,
        columnConfig: [
          {
            label: "套餐名字",
            type: "text",
            prop: "name",
            align: "center"
          },
          {
            label: "赠送电量",
            type: "text",
            prop: "giveElectricity",
            align: "center"
          },
          {
            label: "购买月数",
            type: "text",
            prop: "num",
            align: "center"
          },
          {
            label: "价格",
            type: "text",
            prop: "price",
            align: "center"
          },
          {
            label: "基础服务费单价",
            type: "text",
            prop: "baseServicePrice",
            align: "center"
          },
           {
            label: "赠送月数",
            type: "text",
            prop: "giveNum",
            align: "center"
          },
          {
            label: "卖出总电量",
            type: "text",
            prop: "soldElectricity",
            align: "center"
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
  methods: {
    
    async getQuery() {
      let state =  this.searchs.state
      let type = this.searchs.type
      let name = this.searchs.name
      let page = this.pager.current
      let search = objectFilter({name, state, type})
      const res = await request({
        url: "/personal/combo/pay/list",
        method: "POST",
        data:  this.cid
      });
      this.tableData = res.list
      this.pager.total = res.page.totalCount
      this.pager.current = res.page.currPage
    },
    pageChange(val) {
      this.pager.current = val;
      this.getQuery();
    },
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    editStore(rowData){
      // this.$store.commit('saveSearchs', this.searchs)
      // this.$store.commit('savePager', this.pager)
      this.modalData = {...rowData}
      this.visible = true
      // this.$router.push({ path: "/combo/list/info",query:{id:id} })
    },
    onCancel(){
      this.visible = false
    },
     async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
     async updateData(values){
       if(!this.cid){
         this.$message.error('请选择套餐')
         return 
       }
      let url, msg
      let data = {...values, cid: this.cid}
      if (values.id){
        url = '/personal/combo/pay/update'
        msg = '编辑成功'
      }else {
        url = '/personal/combo/pay/add'
        msg = '添加成功'
      }
    let res = await request({
      url: url,
      method: 'POST',
      data: data
    })
    if (res.code !==0) return
     this.$message.success(msg)
      this.visible = false
      this.getQuery()
    },
    commentDetail(id){
      this.$store.commit('saveSearchs', this.searchs)
      this.$store.commit('savePager', this.pager)
      this.$router.push({ path: "/combo/detail",query:{couponId:id,type: "toview"} })
    },
    remove(id){
       this.$confirm('确认删除吗', '操作确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then( async () => {
        let del = await request({
        url: "/personal/combo/pay/delete",
        method: "POST",
        dataType: 'json',
        data:  [id]
      });
      if (del.code !==0) return
        this.$message.success('删除成功')
        if(this.tableData.length===1 && this.pager.current>1)
          this.$set(this.pager,'current', this.pager.current-1)
        this.getQuery()
      })
    },
  }
}
</script>
<style lang='scss' module>
.examine{
    display: flex;
    align-items: center;
    :global{
        div{
            color: #fff;
            padding: 10px;
            margin: 0 10px;
            border-radius: 2px;
            font-size: 14px;
            cursor: pointer;
            min-width: 60px;
            text-align: center;
        }
        .adopt{
                background: #409EFF;
        }
    }
}
.selectBox {
  :global {
    label {
      font-size: 14px;
      color: #666666;
      margin-right: 20px;
    }
    .el-input__inner {
      height: 32px!important;
    }
    .el-input__suffix {
      line-height: 26px;
    }
    .el-date-editor--datetime {
      width: 200px;
    }
  }
}
.search_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  :global {
    .el-input {
      width: 150px;
    }
    .el-select {
      .el-input {
        width: 90px;
      }
    }
    .el-input__icon {
      line-height: 27px;
    }
    .el-range-separator{
      line-height: 26px;
    }
  }
}

.topSelect {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}
</style>